<!doctype html><html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge,chrome=1">
<title>使用 GitHub Actions 部署博客到 GitHub Pages - Taxodium</title>
<meta name=renderer content="webkit">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv=cache-control content="no-transform">
<meta http-equiv=cache-control content="no-siteapp">
<meta name=theme-color content="#f8f5ec">
<meta name=msapplication-navbutton-color content="#f8f5ec">
<meta name=apple-mobile-web-app-capable content="yes">
<meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec">
<meta name=author content="Spike Leung"><meta name=description content="&#34;&#34;"><meta name=keywords content="[]">
<meta name=generator content="Hugo 0.88.1 with theme even">
<link rel=canonical href=http://localhost:1313/taxodium/post/use-github-action-deploy-blog/>
<link rel=apple-touch-icon sizes=180x180 href=/taxodium/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/taxodium/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/taxodium/favicon-16x16.png>
<link rel=manifest href=/taxodium/manifest.json>
<link rel=mask-icon href=/taxodium/safari-pinned-tab.svg color=#5bbad5>
<script async src=//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js></script>
<link href=/taxodium/sass/main.min.f92fd13721ddf72129410fd8250e73152cc6f2438082b6c0208dc24ee7c13fc4.css rel=stylesheet>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin=anonymous>
<meta property="og:title" content="使用 GitHub Actions 部署博客到 GitHub Pages">
<meta property="og:description" content="&#34;&#34;">
<meta property="og:type" content="article">
<meta property="og:url" content="http://localhost:1313/taxodium/post/use-github-action-deploy-blog/"><meta property="article:section" content="post">
<meta property="article:published_time" content="2021-08-15T12:29:15+08:00">
<meta property="article:modified_time" content="2021-09-13T09:46:52+08:00">
<meta itemprop=name content="使用 GitHub Actions 部署博客到 GitHub Pages">
<meta itemprop=description content="&#34;&#34;"><meta itemprop=datePublished content="2021-08-15T12:29:15+08:00">
<meta itemprop=dateModified content="2021-09-13T09:46:52+08:00">
<meta itemprop=wordCount content="995">
<meta itemprop=keywords content="git,github-actions,"><meta name=twitter:card content="summary">
<meta name=twitter:title content="使用 GitHub Actions 部署博客到 GitHub Pages">
<meta name=twitter:description content="&#34;&#34;"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]-->
</head>
<body>
<div id=mobile-navbar class=mobile-navbar>
<div class=mobile-header-logo>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<div class=mobile-navbar-icon>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id=mobile-menu class="mobile-menu slideout-menu">
<ul class=mobile-menu-list>
<a href=/taxodium/>
<li class=mobile-menu-item>Home</li>
</a><a href=/taxodium/post/>
<li class=mobile-menu-item>Archives</li>
</a><a href=/taxodium/tags/>
<li class=mobile-menu-item>Tags</li>
</a><a href=/taxodium/categories/>
<li class=mobile-menu-item>Categories</li>
</a><a href=/taxodium/about/>
<li class=mobile-menu-item>About</li>
</a>
</ul>
</nav>
<div class=container id=mobile-panel>
<header id=header class=header>
<div class=logo-wrapper>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<nav class=site-navbar>
<ul id=menu class=menu>
<li class=menu-item>
<a class=menu-item-link href=/taxodium/>Home</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/post/>Archives</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/tags/>Tags</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/categories/>Categories</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/about/>About</a>
</li>
</ul>
</nav>
</header>
<main id=main class=main>
<div class=content-wrapper>
<div id=content class=content>
<article class=post>
<header class=post-header>
<h1 class=post-title>使用 GitHub Actions 部署博客到 GitHub Pages</h1>
<div class=post-meta>
<span class=post-time> 2021-08-15 </span>
<div class=post-category>
<a href=/taxodium/categories/git/> git </a>
</div>
<span class=more-meta> 995 words </span>
<span class=more-meta> 2 mins read </span>
<span id=busuanzi_container_page_pv class=more-meta> <span id=busuanzi_value_page_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> times read </span>
</div>
</header>
<div class=post-toc id=post-toc>
<h2 class=post-toc-title>Contents</h2>
<div class="post-toc-content always-active">
<nav id=TableOfContents>
<ul>
<li><a href=#headline-1>GitHub Actions</a>
<ul>
<li><a href=#headline-2>为什么用 GitHub Actions</a>
</li>
<li><a href=#headline-3>什么是 GitHub Actions</a>
<ul>
<li><a href=#headline-4>Event-Driven</a>
</li>
<li><a href=#headline-5>创建 GitHub Actions</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href=#headline-6>参考链接</a>
</li>
</ul>
</nav>
</div>
</div>
<div class=post-content>
<p>
笔者目前的博客使用的是 <a href=https://v2.vuepress.vuejs.org/>Vuepress</a>, 参考文档，使用 <code>Travis CI</code> 实现了博客推送更新后自动部署。
最近了解到 <code>GitHub Actions</code> ，遂将博客的自动部署改为 <code>GitHub Actions</code>, 本文将简单介绍 <code>GitHub Actions</code> 以及笔者博客如何实现自动部署。</p>
<div id=outline-container-headline-1 class=outline-2>
<h2 id=headline-1>
GitHub Actions
</h2>
<div id=outline-text-headline-1 class=outline-text-2>
<div id=outline-container-headline-2 class=outline-3>
<h3 id=headline-2>
为什么用 GitHub Actions
</h3>
<div id=outline-text-headline-2 class=outline-text-3>
<ul>
<li>
<p>尝鲜</p>
</li>
<li>
<p>它和 `GitHub` 集成到一起，方便</p>
</li>
<li>
<p>有很多别人已经写好的 <a href="https://github.com/marketplace?type=actions">actions</a> 可以直接拿来用，避免重复造轮子，节省时间</p>
</li>
<li>
<p>…</p>
</li>
</ul>
</div>
</div>
<div id=outline-container-headline-3 class=outline-3>
<h3 id=headline-3>
什么是 GitHub Actions
</h3>
<div id=outline-text-headline-3 class=outline-text-3>
<div id=outline-container-headline-4 class=outline-4>
<h4 id=headline-4>
Event-Driven
</h4>
<div id=outline-text-headline-4 class=outline-text-4>
<blockquote>
<p>GitHub Actions are event-driven, meaning that you can run a series of commands after a specified event has occurred</p>
</blockquote>
<p>
<code>GitHub Actions</code> 它是事件驱动的，当某个事件，例如 <code>push</code> ， <code>merge</code> 发生的时候，就触发对应的处理 <a href=https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions*workflows>workflows</a></p>
</div>
</div>
<div id=outline-container-headline-5 class=outline-4>
<h4 id=headline-5>
创建 GitHub Actions
</h4>
<div id=outline-text-headline-5 class=outline-text-4>
<ol>
<li>
<p>在 Git 仓库下创建 <code>.github/workflows</code> 目录， 目录下创建一个对应的 <code>xxxx.yaml</code> 配置文件，每个 <code>yaml</code> 文件对应一个 <code>workflows</code></p>
</li>
<li>
<p>一个 <code>xxx.yaml</code> 文件，内容大致如下：(这是我的博客的部署 <code>workflows</code>, 具体含义见注释)</p>
</li>
</ol>
<div class="src src-yaml">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=c># Optional - The name of the workflow as it will appear in the Actions tab of the GitHub repository.</span><span class=w>
</span><span class=w></span><span class=c># workflows 的名称</span><span class=w>
</span><span class=w></span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>deploy-to-github-page</span><span class=w>
</span><span class=w></span><span class=c># Specify the event that automatically triggers the workflow file.</span><span class=w>
</span><span class=w></span><span class=c># 监听什么事件时触发这个workflows, 这里监听push</span><span class=w>
</span><span class=w></span><span class=nt>on</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>push]</span><span class=w>
</span><span class=w></span><span class=c># Groups together all the jobs that run in the workflow file</span><span class=w>
</span><span class=w></span><span class=c># 这个workflows具体是由哪些任务组成的</span><span class=w>
</span><span class=w></span><span class=nt>jobs</span><span class=p>:</span><span class=w>
</span><span class=w></span><span class=c># define job name</span><span class=w>
</span><span class=w></span><span class=c># 任务1, `deploy`是任务的名称</span><span class=w>
</span><span class=w></span><span class=nt>deploy</span><span class=p>:</span><span class=w>
</span><span class=w></span><span class=c># Configures the job to run on an Ubuntu Linux runner</span><span class=w>
</span><span class=w></span><span class=c># 在什么环境下执行这个任务</span><span class=w>
</span><span class=w></span><span class=nt>runs-on</span><span class=p>:</span><span class=w> </span><span class=l>ubuntu-latest</span><span class=w>
</span><span class=w></span><span class=c># Groups together all the steps that run in the job</span><span class=w>
</span><span class=w></span><span class=c># Each item nested under this section is a separate action or shell command.</span><span class=w>
</span><span class=w></span><span class=c># 任务具体包含什么步骤</span><span class=w>
</span><span class=w></span><span class=nt>steps</span><span class=p>:</span><span class=w>
</span><span class=w>  </span><span class=c># actions The uses keyword tells the job to retrieve v2 of the community action named actions/checkout@v2</span><span class=w>
</span><span class=w>  </span><span class=c># 每个步骤，即可以使用(`uses`)别人写好的`actions`, 也可以跑自己写的命令(`run`)</span><span class=w>
</span><span class=w>  </span>- <span class=nt>uses</span><span class=p>:</span><span class=w> </span><span class=l>actions/checkout@v2</span><span class=w> </span><span class=c># 拉取代码</span><span class=w>
</span><span class=w>  </span>- <span class=nt>uses</span><span class=p>:</span><span class=w> </span><span class=l>actions/setup-node@v2</span><span class=w> </span><span class=c># 装node.js环境</span><span class=w>
</span><span class=w>    </span><span class=nt>with</span><span class=p>:</span><span class=w> </span><span class=c># 输入这个`actions`需要的参数，例如版本号</span><span class=w>
</span><span class=w>      </span><span class=nt>node-version</span><span class=p>:</span><span class=w> </span><span class=s1>&#39;14&#39;</span><span class=w>
</span><span class=w>    </span><span class=c># shell command, The run keyword tells the job to execute a command on the runner.</span><span class=w>
</span><span class=w>  </span>- <span class=nt>run</span><span class=p>:</span><span class=w> </span><span class=l>yarn install</span><span class=w> </span><span class=c># 安装博客的依赖</span><span class=w>
</span><span class=w>  </span>- <span class=nt>run</span><span class=p>:</span><span class=w> </span><span class=l>yarn build</span><span class=w> </span><span class=c># 构建博客的静态文件</span><span class=w>
</span><span class=w>  </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>Deploy</span><span class=w>
</span><span class=w>    </span><span class=nt>uses</span><span class=p>:</span><span class=w> </span><span class=l>peaceiris/actions-gh-pages@v3</span><span class=w> </span><span class=c># 使用别人写好把静态文件发布到`GitHub Pages`的`actions`</span><span class=w>
</span><span class=w>    </span><span class=nt>with</span><span class=p>:</span><span class=w>
</span><span class=w>      </span><span class=nt>github_token</span><span class=p>:</span><span class=w> </span><span class=l>${{ secrets.GITHUB_TOKEN }}</span><span class=w>
</span><span class=w>      </span><span class=nt>publish_dir</span><span class=p>:</span><span class=w> </span><span class=l>docs/.vuepress/dist</span></code></pre></td></tr></table>
</div>
</div>
</div>
<p>
部署博客的 <code>workflows</code> 还是蛮简单的，阅读配置文件，可以发现 <code>GitHub Actions</code> 的大致流程是这样的:</p>
<ul>
<li>
<p>当某个事件发生，例如 <code>push</code></p>
<ul>
<li>
<p>触发 <code>workflows</code> ， 对应 <code>.github/workflows</code> 目录下定义的 <code>yaml</code> 配置</p>
</li>
<li>
<p>每个 <code>workflows</code></p>
<ul>
<li>
<p>定义匹配什么事件 (<code>on: push</code>)</p>
</li>
<li>
<p>定义都有那些任务 (<code>jobs</code>)</p>
<ul>
<li>
<p><code>jobs</code> 中定义任务的执行环境 (<code>runs-on</code>)</p>
</li>
<li>
<p>每个 <code>jobs</code> 是由一个一个步骤 (<code>steps</code>) 组成的</p>
<ul>
<li>
<p>每个 <code>steps</code> 可以是</p>
<ul>
<li>
<p><code>uses</code> 别人写好的 <code>actions</code></p>
</li>
<li>
<p><code>run</code> 自己定义的命令</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>所以，思考你想在仓库发生什么事件时，做什么任务，这个任务具体包含哪些步骤，然后编写一个配置文件，就差不多了。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id=outline-container-headline-6 class=outline-2>
<h2 id=headline-6>
参考链接
</h2>
<div id=outline-text-headline-6 class=outline-text-2>
<ul>
<li>
<p><a href=https://www.devopsauthority.tech/2021/02/09/github-actions-vs-travis-ci/>GitHub Actions vs Travis CI – Comparing CI/CD Platforms</a></p>
</li>
<li>
<p><a href=https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions>Introduction to GitHub Actions</a></p>
</li>
<li>
<p><a href=https://yaml.org/>YAML</a></p>
</li>
</ul>
</div>
</div>
</div>
<div class=post-copyright>
<p class=copyright-item>
<span class=item-title>Author</span>
<span class=item-content>Spike Leung</span>
</p>
<p class=copyright-item>
<span class=item-title>LastMod</span>
<span class=item-content>
2021-09-13
<a href=https://github.com/Spike-Leung/taxodium/commit/c46287c750d66abf831afdc6dd4d1872ccf27225 title="refactor: change blog categories">(c46287c)</a>
</span>
</p>
<p class=copyright-item>
<span class=item-title>License</span>
<span class=item-content><a rel="license noopener" href=https://creativecommons.org/licenses/by-nc-nd/4.0/ target=_blank>CC BY-NC-ND 4.0</a></span>
</p>
</div>
<footer class=post-footer>
<div class=post-tags>
<a href=/taxodium/tags/git/>git</a>
<a href=/taxodium/tags/github-actions/>github-actions</a>
</div>
<nav class=post-nav>
<a class=prev href=/taxodium/post/deploy-static-file-to-server/>
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default">部署前端静态文件的简单步骤</span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class=next href=/taxodium/post/svn-cheatsheet/>
<span class="next-text nav-default">SVN Cheatsheet</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i>
</a>
</nav>
</footer>
</article>
</div>
<script src=https://utteranc.es/client.js repo=Spike-Leung/taxodium issue-term=pathname theme=github-light crossorigin=anonymous async></script>
<noscript>Please enable JavaScript to view the <a href=https://github.com/utterance>comments powered by utterances.</a></noscript>
</div>
</main>
<footer id=footer class=footer>
<div class=social-links>
<a href=mailto:l-yanlei@hotmail.com class="iconfont icon-email" title=email></a>
<a href=https://github.com/Spike-Leung class="iconfont icon-github" title=github></a>
<a href=http://localhost:1313/taxodium/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a>
</div>
<div class=copyright>
<span class=power-by>
Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span>
<span class=division>|</span>
<span class=theme-info>
Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span>
<div class=busuanzi-footer>
<span id=busuanzi_container_site_pv> site pv: <span id=busuanzi_value_site_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
<span class=division>|</span>
<span id=busuanzi_container_site_uv> site uv: <span id=busuanzi_value_site_uv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
</div>
<span class=copyright-year>
&copy;
2017 -
2021<span class=heart><i class="iconfont icon-heart"></i></span><span>Spike Leung</span>
</span>
</div>
</footer>
<div class=back-to-top id=back-to-top>
<i class="iconfont icon-up"></i>
</div>
</div>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin=anonymous></script>
<script>var languageCode="en".replace(/-/g,'_').replace(/_(.*)/,function(b,a){return b.replace(a,a.toUpperCase())});timeago().render(document.querySelectorAll('.timeago'),languageCode),timeago.cancel()</script>
<script type=text/javascript src=/taxodium/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js></script>
<script id=baidu_push>(function(){var a,c,b;if(window.location.hostname==='localhost')return;a=document.createElement('script'),a.async=!0,c=window.location.protocol.split(':')[0],c==='https'?a.src='https://zz.bdstatic.com/linksubmit/push.js':a.src='http://push.zhanzhang.baidu.com/push.js',b=document.getElementsByTagName("script")[0],b.parentNode.insertBefore(a,b)})()</script>
</body>
</html>